<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .head {
      width: 80%;
      margin: 10px auto;
      background: darkcyan;
      height: 60px;
      display: flex;
      justify-content: flex-end;
      line-height: 60px;
    }

    .search {
      width: 80%;
      margin: 10px auto;
      background: darkorange;
      height: 200px;
    }

    .content {
      width: 80%;
      height: 400px;
      display: flex;
      margin: 10px auto;
    }

    .content_left {
      width: 300px;
      height: 400px;
      background: slateblue;
      position: relative;
    }

    .banner {
      flex: 1;
      background: darksalmon;
      height: 400px;
    }

    .content_right {
      width: 300px;
      height: 400px;
      background: darkturquoise;
    }

    .one_cate {
      list-style: none;

    }

    .one_cate li {
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
    }

    .one_cate li:hover {
      background: #ccc;
    }

    .two_cate {
      width: 600px;
      height: 400px;
      background: skyblue;
      position: absolute;
      top: 0;
      left: 300px;
      display: none;
    }

    .two_cate p {
      line-height: 60px;
      border-bottom: 1px dashed red;
      padding: 0 50px;
      box-sizing: border-box;
    }

    .recommond {
      width: 80%;
      margin: 20px auto;
    }

    .recommond h1 {
      text-align: center;
      line-height: 80px;
      background: skyblue;
    }

    .list {
      display: flex;
      /* justify-content: space-around; */
      background: #f7f7f7;
      flex-wrap: wrap;
    }

    .list_one {
      width: 290px;
      height: 346px;
      padding: 20px 20px;
      box-sizing: border-box;
      background: white;
      margin-top: 10px;
      margin-left: 12px;
    }

    .list_one img {
      width: 220px;
      height: 180px;
    }

    .list_one h3 {
      height: 40px;
      line-height: 40px;
    }

    .list_one p {
      height: 40px;
    }

    .list_one h2 {
      height: 40px;
      line-height: 40px;
      color: red;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div class="head">
    <a href="./cart.html">购物车</a>
    <a href="#" onclick="quit()">退出登录</a>
  </div>
  <div class="search"></div>
  <div class="content">
    <div class="content_left">
      <ul class="one_cate">
        <li>手机</li>
        <li>手机</li>
        <li>手机</li>
        <li>手机</li>
      </ul>
      <div class="two_cate">

      </div>
    </div>
    <div class="banner"></div>
    <div class="content_right"></div>
  </div>
  <div class="recommond">
    <h1>为您推荐</h1>
    <div class="list">
      <!-- <div class="list_one">
        <img src="./images/bx1.jpg" alt="">
        <h3>名称</h3>
        <p>简介</p>
        <h2>价格</h2>
      </div> -->
    </div>
  </div>
  <div style="margin-bottom: 300px;"></div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // 退出登录
    function quit() {
      localStorage.uid = "";
      localStorage.token = "";
      alert("退出成功。。正在跳转登录")
      location.href = "./login.html"
    }
    // 加载一级分类
    function loadOneCate() {
      $.ajax({
        url: "http://127.0.0.1:3000/cate/all",
        type: "get",
        success: function (res) {
          var str = ``;
          $.each(res, function (index, ele) {
            str += `<li cid="${ele._id}">${ele.cn_name}</li>`
          })
          $(".one_cate").html(str)
        }
      })
    }
    loadOneCate()

    // 鼠标滑过li 加载二级分类
    $(".one_cate").on("mouseenter", "li", function () {
      $(".two_cate").show();  //二级分类显示
      $.ajax({
        url: "http://127.0.0.1:3000/cate/findTwo",
        type: "post",
        data: {
          oneId: $(this).attr("cid")
        },
        success: function (res) {
          console.log(res)
          var str = ``
          $.each(res, function (index, ele) {
            str += `<p tid="${ele._id}">${ele.two_name}</p>`
          })
          $(".two_cate").html(str)
        }
      })

    })
    $(".one_cate").on("mouseleave", "li", function () {
      $(".two_cate").hide();
    })
    $(".two_cate").hover(function () {
      $(this).show()
    }, function () {
      $(this).hide();
    })

    // 渲染为你推荐商品部分
    function showList() {
      $.ajax({
        url: "http://127.0.0.1:3000/product/all",
        type: "post",
        success: function (res) {
          var str = ``
          $.each(res, function (index, ele) {
            if (ele.status == "1") { //判断是否下架
              str += `  <div class="list_one" onclick="turn('${ele._id}')">
              <img src="./images/${ele.img}.jpg" alt="">
              <h3>${ele.pname}</h3>
              <p>${ele.des}</p>
              <h2>${ele.price}</h2>
            </div>`
            }
          })
          $(".list").html(str)
        }
      })
    }
    showList()
    // 跳转页面并传送id
    function turn(id) {
      // 使用search传参
      location.href = "./info.html?pid=" + id;
    }
  </script>
</body>

</html>